<template>
  <div class="userList">
    <div class="title_box">
      <div class="title">角色列表</div>
      <!-- <el-button type="primary" @click="add">新增</el-button> -->
    </div>
    <div class="list_box">
      <div class="list_box_serch">
        <el-form :model="SerchForm" label-width="120px">
          <el-form-item label="角色名称：" prop="roleName">
            <el-input clearable v-model="SerchForm.roleName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="serch_btn">
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
      <LsdTable slot="yjrwlb" :multiple="table.multiple" :paginationAtrrs="table.paginationAtrrs" :compRef="table.compRef"
        ref="jsConfig" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @select="select" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <div slot="dialog" class="form_box">
        <el-form v-if="dialogConfig.isShow" :rules="rules" ref="form"
          style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :model="form"
          label-width="120px">
          <el-form-item label="角色名称：" prop="roleName">
            <el-input clearable v-model="form.roleName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="角色编码：" prop="roleCode">
            <el-input clearable v-model="form.roleCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="form.description">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </LsdDialog>
  </div>
</template>

<script>

import { roleDoList, roleAdd, roleDelete } from "@/api/SystemConfig/roleConfig";
export default {
  components: {},
  data() {
    return {
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleCode: [
          { required: true, message: "请输入角色编码", trigger: "blur" }
        ]
      },
      form: {
        roleName: "",
        roleCode: "",
        description: ""
      },
      SerchForm: {
        roleName: ""
      },
      // 列表表格
      table: {
        isSelectFlag: true,
        compRef: "jspzList",
        isSequenceFlag: false,
        isShowPage: false,
        resetFlag: false,
        loading: false,
        title: "",
        multiple: false,
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "roleName",
            label: "角色名称",
            align: "center"
          },
          {
            prop: "roleCode",
            label: "角色编码",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            width: "70px",
            render: (h, scope) => {
              const arr = ["删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        tableAttr: {
          height: `${window.innerHeight - 350}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        }
      },
      checkRadio: "",
      dialogConfig: {
        title: "角色配置",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    window.onresize = () => {
      window.onload();
    };
    this.getRoleList();
  },
  methods: {
    actionHandle(item, scope) {
      if (item === "删除") {
        this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          roleDelete({ id: scope.row.id }).then(res => {
            this.$message({
              message: "删除成功!",
              type: "success"
            });
            this.getRoleList();
          });
        })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    getRoleList(val) {
      let params = {};
      if (val) {
        params = { ...val };
      }
      roleDoList(params).then(res => {
        this.table.tableData = res;
        this.$emit("checkRole", res[0].id, res[0]);
        console.log([res[0].id], "----[res[0].id]");
        this.$nextTick(() => {
          this.$refs.jsConfig.toggleSelection([res[0].id]);
        });
      });
    },
    close(val) {
      val.isShow = false;
    },
    add() {
      this.dialogConfig.isShow = true;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = { ...this.form };
          roleAdd(params).then(res => {
            if (res) {
              this.$message({
                message: "添加成功!",
                type: "success"
              });
              this.dialogConfig.isShow = false;
              this.getRoleList();
            }
            console.log(res, "---res");
          });
        }
      });
    },
    onActionClick(item) {
      this[item.id]();
    },
    select(selection, row) {
      this.$emit("checkRole", selection[0].id, row);
      this.checkRadio = row.id;
    },
    query() {
      const params = {
        ...this.SerchForm
      };
      this.getRoleList(params);
    },
    reset() {
      this.SerchForm = {};
      this.getRoleList();
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.userList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title_box {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;

    // padding: 14px 10px;
    .title {
      width: 90%;
      font-size: 20px;
      font-weight: 600;
      color: #1890ff;
      text-align: center;
    }
  }

  .list_box {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list_box_serch {
      width: 100%;
      height: 8%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      :deep(.el-form-item) {
        margin: 0;
      }

      :deep(.el-input__inner) {
        height: 32px;
      }
    }
  }
}

// :deep(.leftTopBtn) {
//   height: 0 !important;
//   margin-bottom: 0 !important;
// }
.form_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.el-input__inner) {
    width: 500px;
  }

  :deep(.el-textarea__inner) {
    width: 500px;
  }
}
</style>
